<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2020/11/30
  Time: 14:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>前台管理</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>

</head>
<body>

<div class="layui-tab layui-tab-card" style="height: 100%">
    <ul class="layui-tab-title">
        <li class="layui-this" value="1">标准单人间</li>
        <li value="2">标准双人间</li>
        <li value="3">高级单人床</li>
        <li value="4">豪华单人床</li>
        <li value="5">豪华双人床</li>
        <li value="6">特价房</li>
        <li value="7">情侣主题房</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px" id="all">
        <div class="layui-tab-item layui-show" id="type1"></div>
        <div class="layui-tab-item" id="type2"></div>
        <div class="layui-tab-item" id="type3"></div>
        <div class="layui-tab-item" id="type4"></div>
        <div class="layui-tab-item" id="type5"></div>
        <div class="layui-tab-item" id="type6"></div>
        <div class="layui-tab-item" id="type7"></div>
    </div>
</div>
<%-- 退房的form表单--%>
<div id="leavefrom">
    <form class="layui-form" action="" lay-filter="modify">

            <div class="layui-input-block">
                <input type="hidden" name="syts" required disabled placeholder="请输入设施的名字" autocomplete="off" class="layui-input">
            </div>

        <div class="layui-form-item">
            <label class="layui-form-label">房间号</label>
            <div class="layui-input-block">
                <input type="text" name="roomcode" required disabled placeholder="请输入设施的名字" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">订单号</label>
            <div class="layui-input-block">
                <input type="text" name="orderid" required disabled placeholder="请输入设施的数量" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">押金</label>
            <div class="layui-input-block">
                <input type="text" name="rzyj" required disabled placeholder="请输入设施的类型" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">应退金额</label>
            <div class="layui-input-block">
                <input type="text" name="fantui" required disabled placeholder="请输入设施的定价" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">实收金额</label>
            <div class="layui-input-block">
                <input type="text" name="implmoney" required disabled placeholder="请输入供应商" autocomplete="off" class="layui-input">
            </div>
        </div>


            <div class="layui-input-block">
                <input type="text" name="ruzhuid" id="ruzhuid" required disabled placeholder="请输入供应商" autocomplete="off" class="layui-input">
            </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即退房</button>
            </div>
        </div>
    </form>
</div>


<div id="huanfang">

</div>





<div id="xufang">
    <form class="layui-form" action="" >
        <input type="text" name="ruzhuid" id="ruzhuid1">
        <input type="text"  name="begin" id="begin">
        <input type="text"  name="endtime" id="endtime">
        <div class="layui-inline">
        <input type="text" class="layui-input" id="test1">
        </div>
        <button class="layui-btn"  onclick="closelayer()" style="margin-bottom: 10px">关闭弹框</button>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo1">续房</button>
            </div>
        </div>

    </form>
</div>




<script>


    var $="";
    var form="";
    var data="";
    var laydate="";
    layui.use(['jquery','form','laydate'],function (){
         $=layui.jquery;
         laydate= layui.laydate;
         form = layui.form;
         $("#leavefrom").hide();
         $("#xufang").hide();




        $.ajax({
            url:"/allroom",
            data:{},
            type:"post",
            dataType:"JSON",
            success:function (ret){
                alert(JSON.stringify(ret));

                var div="";
                for (let i = 0; i < ret.length; i++) {

                    if (ret[i].typeid==1){

                        if (ret[i].status==0){
                            if (ret[i].rzdate !=null && ret[i].rzdate!=""){
                                if (ret[i].endtime!=null && ret[i].endtime!=""){

                                    begin= ret[i].rzdate;
                                    endtime = ret[i].endtime;

                                    var date1Str = begin.split("-");//将日期字符串分隔为数组，数组元素分别为年、月、日
                                    //根据年、月、日的值创建Date对象
                                    var date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]);
                                    var date2Str = endtime.split("-");
                                    let date = new Date();
                                    var date2Obj = new Date(date2Str[0],(date2Str[1]-1),date2Str[2]);
                                    var t1 = date1Obj.getTime();//返回从1970-1-1开始计算到Date对象中的时间之间的毫秒数
                                    var t2 = date2Obj.getTime();//返回从1970-1-1开始计算到Date对象中的时间之间的毫秒数
                                    var t3 = date.getTime();
                                    var datetime=1000*60*60*24; //一天时间的毫秒值
                                    var minusDays = Math.floor(((t2-t1)/datetime));//计算出两个日期天数差
                                    var yizhu = Math.floor(((t3-t1)/datetime)+1);
                                    var haisheng = Math.floor(((t2-t3)/datetime));

                                }else {
                                    begin= ret[i].rzdate;
                                    endtime = ret[i].leavedate;

                                    var date1Str = begin.split("-");//将日期字符串分隔为数组，数组元素分别为年、月、日
                                    //根据年、月、日的值创建Date对象
                                    var date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]);
                                    var date2Str = endtime.split("-");
                                    let date = new Date();
                                    var date2Obj = new Date(date2Str[0],(date2Str[1]-1),date2Str[2]);
                                    var t1 = date1Obj.getTime();//返回从1970-1-1开始计算到Date对象中的时间之间的毫秒数
                                    var t2 = date2Obj.getTime();//返回从1970-1-1开始计算到Date对象中的时间之间的毫秒数
                                    var t3 = date.getTime();
                                    var datetime=1000*60*60*24; //一天时间的毫秒值
                                    var minusDays = Math.floor(((t2-t1)/datetime));//计算出两个日期天数差
                                    var yizhu = Math.floor(((t3-t1)/datetime)+1);
                                    var haisheng = Math.floor(((t2-t3)/datetime));
                                }

                            }else {
                                var minusDays="";
                                var yizhu="";
                                var haisheng="";
                            }


                            div="<div class='grid-demo grid-demo-bg1' style='color: white;float: left; width: 18%; background-color: palevioletred;height: 300px;" +
                                "margin: 10px;border-radius:30px;text-align: center;font-weight: bold'>"+ret[i].tname+"<br/>"
                                +"房间号:"+ret[i].roomcode+"<br/>"+"<span style='font-size: 30px'>"+"正常"+"</span>"+"<br/>"+"名字:"+ret[i].name+"<br/>"+"手机号:"+ret[i].tel+
                                "<br/>"+"身份证号:"+ret[i].idcard+"<br/>"+"共住:"+minusDays+"天,"+"已住:"+yizhu+"天,"+"还剩"+haisheng+"天"+
                                "<br/><button class='layui-btn layui-btn-normal' onclick='xufang("+ret[i].id+")' style='color: white;position: relative;top: 40px;margin-right: 5px'>续房</button>" +
                                "<button class='layui-btn layui-btn-warm' onclick='huanfang("+ret[i].id+")' style='color: white;position: relative;top: 40px;margin-right: 5px'>换房</button>" +
                                "<button class='layui-btn layui-btn-danger' onclick='tuifang("+ret[i].id+")' style='color: white;position: relative;top: 40px;margin-right: 5px'>退房</button></div>";
                            $("#type1").append(div);
                        }else if (ret[i].status==1){
                            div="<div class='grid-demo grid-demo-bg1' style='color: white;float: left; width: 18%; background-color: yellowgreen;height: 300px;" +
                                "margin: 10px;border-radius:30px;text-align: center;font-weight: bold'>"+ret[i].tname+"<br/>"
                                +"房间号:"+ret[i].roomcode+"<br/>"+"<span style='font-size: 30px'>"+"待打扫"+"</span>"+
                                "<br/><button class='layui-btn' onclick='dasao("+ret[i].roomcode+")' style='position: relative;top: 115px;margin-right: 5px'>打扫</button></div></div>";

                            $("#type1").append(div);
                        }else if (ret[i].status==2){
                            div="<div class='grid-demo grid-demo-bg1' style='color: white;float: left; width: 18%; background-color: lightseagreen;height: 300px;" +
                                "margin: 10px;border-radius:30px;text-align: center;font-weight: bold'>"+ret[i].tname+"<br/>"
                                +"房间号:"+ret[i].roomcode+"<br/>"+"<span style='font-size: 30px'>"+"待分配"+"</span>"+"</div>";
                            $("#type1").append(div);
                        }else {
                            div="<div class='grid-demo grid-demo-bg1' style='color: white;float: left; width: 18%; background-color: darkgray;height: 300px;" +
                                "margin: 10px;border-radius:30px;text-align: center;font-weight: bold'>"+ret[i].tname+"<br/>"
                                +"房间号:"+ret[i].roomcode+"<br/>"+"<span style='font-size: 30px'>"+"维修"+"</span>"+"</div>";
                            $("#type1").append(div);
                        }
                    }



                }

            },error:function (){
                alert("错啦");
            }

        });







    });


    function closelayer(){
        layer.closeAll();
        if (confirm("您是否要退出")){
            location.reload();
        }


    }
   // layui.use('jquery',function (){
   //     var $= layui.jquery;

    var aa="";
    //打扫
    function dasao(b){
        $.ajax({
            url:"/dasaofang"
            ,data:{"roomcode":b}
            ,type:"post"
            ,async:false
            ,dataType:"JSON"
            ,success:function (r){

                if(r>0){
                    layer.msg("打扫成功")
                }
            },error:function (msg){
                alert("错误");
            }
        });
        location.reload();

    }

    //续房
    function xufang(a){
        form.render();

        //获取当前的入住详a情id
        alert(a);
        //获取当前的房间号
        $.ajax({
            url:"/xufang",
            data:{"ruzhuid":a},
            type:"post",
            dataType:"JSON",
            async:false,
            success:function (ret){
                let date1 = new Date(ret);
                date1.setDate(date1.getDate() + 6);
                var yy = date1.getFullYear();
                var mm = date1.getMonth() + 1;
                var dd = date1.getDate();
                var endD = yy + "-" + mm + "-" + dd;

                alert(endD);


                $("#begin").val(ret);
                $("#ruzhuid1").val(a);


                laydate.render({
                    elem: '#test1' //指定元素
                    ,isInitValue:true
                    ,value:ret
                    ,min:ret
                    ,max:endD
                    ,done: function(value, date, endDate){
                        $("#endtime").val(value);
                    }
                });

            },
            error:function (){
                alert("错误")
            }
        })




        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['500px', '400px'], //宽高
            rYOffset:'-200px',
            content:$("#xufang")
        });


        form.on('submit(formDemo1)', function(data){
                alert(JSON.stringify(data.field));
                if($("#endtime").val()==null || $("#endtime").val()==""){
                    layer.msg("请选择日期")
                }else {
                    $.ajax({
                       url:"/quedingxufang",
                       data:data.field,
                       type:"post",
                       dataType:"JSON",
                       async:false,
                       success:function (ret){
                            if (ret>0){
                                alert("续房成功");
                            }else {
                                alert("续房时间不对劲");
                            }
                       } ,
                        error:function (){
                           alert("错误");
                        }
                    });
                }



            return false;
        });



    }



    //换房
     function huanfang(a){
        aa=a;


         $.ajax({
            url:"/huanfang",
            data:{"ruzhuid":a},
             type:"post",
            dataType:"JSON",
             async:false,
             success:function (ret){

                 $("#huanfang").empty();

                if(ret.length>0){
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['1100px', '700px'], //宽高
                        rYOffset:'-200px',
                        content:$("#huanfang")
                    });

                    //alert(JSON.stringify(ret));
                    var div="";
                    for (let i = 0; i < ret.length; i++) {
                        var c = ret[i].roomcode+","+a;

                        div="<div class='grid-demo grid-demo-bg1' style='color: white;float: left; width: 18%;background-color: lightseagreen;height: 230px;" +
                            "margin: 10px;border-radius:30px;text-align: center;font-weight: bold'>"+ret[i].tname+"<br/>"
                            +"房间号:"+ret[i].roomcode+"<br/>"+"<span style='font-size: 30px'>"+"待分配"+"</span><br/><br/><br/><br/><a class='layui-btn layui-btn-danger' style='margin-bottom: 10px'  onclick='hf("+ret[i].roomcode+")'>换房 </a></div>";

                        $("#huanfang").append(div);

                    }
                }else{
                    layer.msg("没有剩余房间了哦！！！")
                }



             },error:function (){
                alert("哈哈哈哈");
             }


         });


     }
     function hf(b){
        var b=b;
        $.ajax({
            url:"/qdhf"
            ,type:"post"
            ,data:{"rmcode":b,"rzid":aa}
            ,dataType:"JSON"
            ,async:false
            ,success:function (ret){
                if (ret>0){
                    layer.msg("换房成功");
                }else {
                    layer.msg("换房失败");
                }
            },error:function (){
                alert("出错了")
            }
        });
        location.reload();

     }

    //退房
       function tuifang(a){
           alert(JSON.stringify(a));

           $.ajax({
               url: "/tuifang",
               data: {"rzxq":a},
               type: "post",
               dataType:"JSON",
               async:false,
               success:function (r){
                   data=r[0];


                    layui.use(['layer','form'],function (){
                        form = layui.form;
                        form.val("modify",data);
                        alert(JSON.stringify(data))
                        layer.open({
                            type: 1,
                            skin: 'layui-layer-rim', //加上边框
                            area: ['500px', '400px'], //宽高
                            rYOffset:'-200px',
                            content:$("#leavefrom")
                        });
                        $("#ruzhuid").val(a);
                        form.on('submit(formDemo)', function(data){
                            alert(JSON.stringify(data.field))
                            $.ajax({
                                url:"/lijitui"
                                ,data:data.field
                                ,type:"post"
                                ,dataType:"JSON"
                                ,success:function (r){
                                    if (r>0){
                                        alert("成功");
                                    }else {
                                        alert("失败");
                                    }
                                },error:function (){
                                    alert("错误");
                                }
                            });

                        });


                    });
               } ,error:function (){
                   alert("错啦");
               }
           });

       }






   // });






</script>








<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };
        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

    });
</script>


</body>

</html>
